<template>
    <div>
        
        <p>
            遍历数组
            <ul>
                <li v-for="(item,index) in listArr" :key="item.id">
                    {{index}} - {{item.id}} -{{item.title}}
                </li>
            </ul>
        </p>

        <p>
            遍历对象
        </p>
        <ul v-if="flag">
            <!-- v-if和v-for不能一起用 -->
            <li v-for="(val,key,index) in listObj" :key="key">
                {{index}} -{{key}}-{{val.title}}
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                flag:true,
                // 数据结构中最好有id
                listArr: [{
                        id: 'a',
                        title: '标题1'
                    },
                    {
                        id: 'b',
                        title: '标题2'
                    },
                    {
                        id: 'c',
                        title: '标题3'
                    }
                ],
                listObj: {
                    a: {
                        title: '标题1'
                    },
                    b: {
                        title: '标题2'
                    },
                    c: {
                        title: '标题3'
                    }
                }
            }
        },
    }
</script>
<style>

</style>